<template>
  <div>
    <h3>请假管理页面</h3>
    <el-row>
      <el-col :span="8"
        ><div class="grid-content ep-bg-purple">
          <el-input v-model="key" placeholder="根据用户名搜索" />
        </div>
      </el-col>
      <el-col :span="8"
        ><div class="grid-content ep-bg-purple">
          <el-select v-model="type" class="m-2" placeholder="请选择类别" size="large">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </el-col>
      <el-col :span="8"><div class="grid-content ep-bg-purple"></div> </el-col>
    </el-row>
    <el-row>
      <el-col :lg="8" :xs="24"><div class="grid-content ep-bg-purple">1</div> </el-col>
      <el-col :lg="8" :xs="24"><div class="grid-content ep-bg-purple">2</div> </el-col>
      <el-col :lg="8" :xs="24"><div class="grid-content ep-bg-purple">3</div> </el-col>
    </el-row>
    <leave-list :list="leaveInfo.list" type="1"></leave-list>
    <el-pagination
      :page-size="shownum"
      background
      layout="prev, pager, next"
      :total="total"
      @current-change="change"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue'
import { leaveListAll } from '@/service/leaveService'
import  LeaveList from  "@/components/LeaveList.vue";

let leaveInfo = ref({
  list: []
})

let key = ref() //用户名
let type = ref('') //类别
let shownum = ref(2) //每页显示的数量
let total = ref(100) //默认是100
let pageindex = ref(1) //第几页
const options = [
  {
    value: '',
    label: '全部'
  },
  {
    value: '1',
    label: '待审批'
  },
  {
    value: '2',
    label: '已同意'
  },
  {
    value: '3',
    label: '已拒绝'
  }
]


let search = async () => {
  let res = await leaveListAll({
    pageindex: pageindex.value,
    shownum: shownum.value,
    key: key.value,
    type:type.value
  })
  if (res.data.code == 200) {
    leaveInfo.value.list = res.data.data
    total.value = res.data.total
  }
}
let change = (num: number) => {
  pageindex.value = num

  search()
}
watch([key,type], () => {
  pageindex.value = 1
  search()
})

onMounted(async () => {
  //页面加载完成 获取数据
  search()
})
</script>

<style>
/* .ep-bg-purple{
  text-align: center;
  background-color: red !important;
} */
</style>
